import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, ScrollView, Image, Text } from "@tarojs/components-rn";
import Tabbar from "../../components/Tabbar";
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, pageSize, subtime } from "../../utils/common";
import { toJS } from "mobx";
import indexStyleSheet from "./index_styles";
var _styleSheet = indexStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Index = class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageIndex: 1,
      pageSize: pageSize,
      totalCount: 0,
      items: [],
      currentDynamicTypeId: 1,
      dynamicType: [{ id: 1, name: '行业资讯' }, { id: 2, name: '集团动态' }, { id: 3, name: '福利政策' }]
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '动态' });
    this.getAllDynamic();
    this.getAllDynamicType();
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  changeDynamicType(currentDynamicTypeId) {
    this.setState({
      currentDynamicTypeId
    }, () => {
      this.getAllDynamic();
    });
  }
  getAllDynamic() {
    let dynamicStore = this.props.stores.DynamicStore;
    let { pageIndex, pageSize, currentDynamicTypeId } = this.state;
    dynamicStore.getAllDynamic({
      dynamicType: currentDynamicTypeId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({ totalCount: toJS(res.totalCount), items: toJS(res.items) });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({ totalCount: res.totalCount, items });
        }
      }
    });
  }
  // 获取动态类型
  getAllDynamicType() {
    let dynamicStore = this.props.stores.DynamicStore;
    dynamicStore.getAllDynamicType({
      callback: res => {
        this.setState({
          dynamicType: toJS(res.items)
        });
      }
    });
  }
  onReachBottom() {
    let { totalCount, pageSize, pageIndex } = this.state;
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllDynamic();
      });
    }
  }
  render() {
    let { items, dynamicType, currentDynamicTypeId } = this.state;
    let [firstItem, ...item2] = items;
    return <View style={_styleSheet["dynamic-index"]}>
        <ScrollView scrollX style={_styleSheet["scroll-view-nav"]}>
          {dynamicType.map(item => {
          return <View key={item.id} onClick={this.changeDynamicType.bind(this, item.id)} style={_getStyle(item.id == currentDynamicTypeId ? 'scroll-item scroll-item-on' : 'scroll-item')}>{item.typeName}<Text style={_styleSheet["line"]} /></View>;
        })}
        </ScrollView>

        <View style={_styleSheet["interval"]} />
        {items.length > 0 && <View style={_styleSheet["content-30"]}>
           <View onClick={this.handelRouter.bind(this, '/pages/dynamic/detail?id=' + firstItem.id)} style={_styleSheet["recommend"]}>
              <Image src={firstItem.logo} style={_styleSheet["img"]} />
              <Text style={_styleSheet["title"]}>{firstItem.title}</Text>
           </View>

          {item2.length > 0 && <View style={_styleSheet["list-wrap"]}>
             {item2.map(item => {
            return <View onClick={this.handelRouter.bind(this, '/pages/dynamic/detail?id=' + item.id)} style={_styleSheet["item"]}>
                    <View style={_styleSheet["l"]}>
                      <Text style={_styleSheet["title"]}>{item.title}</Text>
                      <Text style={_styleSheet["date"]}>{subtime(item.creationTime)}</Text>
                    </View>
                    <Image src={item.logo} style={_styleSheet["img"]} />
                  </View>;
          })}
           </View>}
          {item2.length <= 0 && <View style={_styleSheet["page-none-info"]}>暂无更多信息...</View>}
        </View>}
        {!items && <View style={_styleSheet["page-none-info"]}>暂无更多信息...</View>}
        <Tabbar currentTab="dynamic" />
      </View>;
  }
};
Index = tslib_1.__decorate([inject("stores"), observer], Index);
export default Index;